<template>
  <div class="app-container">
    <h1>大声密谋</h1>
    <p class="subtitle">文字加密与解密工具</p>
    
    <div class="input-section">
      <h2>输入文本</h2>
      <textarea 
        v-model="inputText"
        placeholder="请输入要加密或解密的文字..."
        rows="5"
      ></textarea>
      <div class="button-group">
        <button @click="encrypt">加密</button>
        <button @click="decrypt">解密</button>
      </div>
    </div>
    
    <div class="result-section" v-if="resultText">
      <h2>{{ resultType === 'encrypt' ? '加密结果' : '解密结果' }}</h2>
      <div class="result-box">{{ resultText }}</div>
      <button @click="copyToClipboard(resultText)">复制结果</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      inputText: '',
      resultText: '',
      resultType: '', // 'encrypt' 或 'decrypt'
      backendUrl: 'http://localhost:5000/api'
    }
  },
  methods: {
    // 加密函数：调用后端API进行加密
    async encrypt() {
      if (!this.inputText.trim()) {
        alert('请输入要加密的文字');
        return;
      }
      
      try {
        // 调用后端API
        const response = await fetch(`${this.backendUrl}/encrypt`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ text: this.inputText })
        });
        
        if (response.ok) {
          const data = await response.json();
          this.resultText = data.encrypted_text;
          this.resultType = 'encrypt';
        } else {
          const errorData = await response.json();
          alert('加密失败: ' + (errorData.error || '服务器错误'));
        }
      } catch (error) {
        console.error('加密过程中出错:', error);
        alert('加密失败，请检查后端服务是否正常运行');
      }
    },
    
    // 解密函数：调用后端API进行解密
    async decrypt() {
      if (!this.inputText.trim()) {
        alert('请输入要解密的文字');
        return;
      }
      
      try {
        // 调用后端API
        const response = await fetch(`${this.backendUrl}/decrypt`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ text: this.inputText })
        });
        
        if (response.ok) {
          const data = await response.json();
          this.resultText = data.decrypted_text;
          this.resultType = 'decrypt';
        } else {
          const errorData = await response.json();
          alert('解密失败: ' + (errorData.error || '服务器错误'));
        }
      } catch (error) {
        console.error('解密过程中出错:', error);
        alert('解密失败，请检查后端服务是否正常运行');
      }
    },
    
    // 复制到剪贴板
    async copyToClipboard(text) {
      if (!text) return;
      
      try {
        await navigator.clipboard.writeText(text);
        alert('复制成功');
      } catch (err) {
        alert('复制失败，请手动复制');
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.subtitle {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 30px;
}

.input-section {
  margin-bottom: 30px;
}

textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
  margin-bottom: 20px;
  min-height: 120px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s;
  min-width: 120px;
}

button:hover {
  background-color: #45a049;
}

.result-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.result-box {
  background-color: white;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-height: 80px;
  margin: 15px 0;
  text-align: left;
  word-break: break-all;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
}
</style>